<template>
  <view>
    <view class="goods-detail">
      <!-- 导航 -->
      <view class="nav-bar">
        <view class="nav-title">
          <view class="nav">
            <uni-icons type="back" size="26" color="#ccc" @click="back"></uni-icons>
            <text class="text1">{{goodsDetailList.title}}</text>
            <image src="http://localhost:3000/static/shoop2.png"></image>
          </view>
          <view class="banner-img">
            <image :src="goodsDetailList.url" mode=""></image>
          </view>
          <view class="bgc"></view>
          <view class="nav-msg">
            <text>{{goodsDetailList.msg1}}</text>
            <text>{{goodsDetailList.msg2}}</text>
            <text>{{goodsDetailList.msg3}}</text>
          </view>
        </view>
      </view>
      <!-- 商品参数 -->
      <view class="goods-par">
        <view class="msg-one">
          <view class="uname">
            <view class="spe">
              <text>{{goodsDetailList.text2}}</text>
            </view>
            <text>{{goodsDetailList.uname}}</text>
          </view>
          <view class="intro">
            <text>{{goodsDetailList.intro}}</text>
          </view>
          <view class="price">
            <text>￥{{goodsDetailList.price}}</text>
          </view>
          <view class="retail">
            <text>卖场价：￥{{goodsDetailList.retail}}</text>
          </view>
          <view class="live">
            <text>{{goodsDetailList.live}}</text>
          </view>
        </view>
        <view class="goods-two">
          <view class="activity">
            <text>活动</text>
          </view>
          <view class="pintia">
            <view class="platform">
              <view class="radius-tag">
                <text>平台满减</text>
              </view>
              <view class="tag-msg">
                <text>{{goodsDetailList.activity}}</text>
              </view>
            </view>
            <view class="platform">
              <view class="radius-tag">
                <text>平台满减</text>
              </view>
              <view class="tag-msg">
                <text>{{goodsDetailList.activity}}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="goods-three">
          <view class="activity">
            <text>活动</text>
          </view>
          <view class="size">
            <text>请选择尺寸</text>
          </view>
        </view>
      </view>
      <!-- 用户评价 -->
      <view class="user-eva">
        <view class="user-title">
          <text>用户评价 （10）</text>
        </view>
        <view class="user-logo">
          <image :src="userEvaList[0].head_img" mode=""></image>
          <text class="text1">{{userEvaList[0].user_name}}</text>
          <view class="space">
            <text>TA的空间</text>
          </view>
        </view>
        <view class="user-container">
          <text>{{userEvaList[0].user_text}}</text>
        </view>
        <view class="user-img">
          <image :src="userEvaList[0].text_img" mode=""></image>
          <image :src="userEvaList[0].text_imgs1" mode=""></image>
        </view>
        <view class="user-size">
          <text>{{userEvaList[0].size}}</text>
        </view>
      </view>
      <!-- 生活家 -->
      <view class="live-house">
        <text>生活家搭配</text>
        <image :src="liveHome.goods_img"></image>
        <view class="live-name">
          <view class="name">
            <image :src="userEvaList[0].head_img" mode=""></image>
            <view class="one">
              <text class="text1">{{userEvaList[0].user_name}}</text>
              <text class="text2">福州市·三盛国际公司</text>
            </view>
          </view>
          <text class="text1">204人看过</text>
        </view>
      </view>
      <!-- 相似推荐 -->
      <view class="push">
        <text class="text1">相似推荐</text>
        <view class="goods-list">
          <view class="goods-item" v-for="(item,i) in goodsPush" :key="i">
            <view class="img">
              <image :src="item.img"></image>
            </view>
            <view class="msg">
              <text class="text1">{{item.name}}</text>
              <view class="text2">
                <text>{{item.intro[0]}}</text>
                <text>{{item.intro[1]}}</text>
              </view>
              <text class="text3">￥{{item.price}}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 商品基本信息 -->
      <view class="basic">
        <view class="text1">
          <text>商品基础信息</text>
        </view>
        <view class="text2">
          <view class="txt">
            <view class="yuan">
              <view class="circle">
              </view>
              <text class="text-one">商品风格</text>
            </view>
            <view class="yuan">
              <view class="circle">
              </view>
              <text class="text-one">面料</text>
            </view>
            <view class="yuan">
              <view class="circle">
              </view>
              <text class="text-one">主材</text>
            </view>
          </view>
          <view class="txt1">
            <text class="text-two">意式极简</text>
            <text class="text-two">棉麻混纺</text>
            <text class="text-two">实木</text>
          </view>
        </view>
        <view class="more">
          <text class="more-text">展开更多</text>
        </view>
      </view>

      <uni-goods-nav :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />

    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        goodsDetailList: [],
        userEvaList: [],
        liveHome: [],
        goodsPush: [],
        options: [{
          icon: 'headphones',
          text: '家居顾问'
        }, {
          icon: 'heart',
          text: '收藏'
        }, {
          icon: 'cart',
          text: '购物车',
          info: 0,
          infoBackgroundColor: '#000',
          infoColor: '#fff'
        }],
        buttonGroup: [{
          text: '加入购物车',
          backgroundColor: '#212f3c',
          color: '#fff'
        }]
      };
    },
    methods: {
      back() {
        uni.navigateBack({
          delta: 1
        })
      },
      ...mapMutations('m_cart', ['addToCart']),
      onClick(e) {
        if (e.content.text === '购物车') {
          uni.switchTab({
            url: '/pages/cart/cart'
          })
        }
      },
      buttonClick(e) {
        const tokenStr = uni.getStorageSync('token')

        const goods = {
          goods_id: this.goodsDetailList.uId, // 商品id
          goods_name: this.goodsDetailList.uname, // 商品名称
          goods_price: this.goodsDetailList.price, // 商品价格
          goods_count: 1, // 商品数量
          goods_small_logo: this.goodsDetailList.url, // 商品的图片
          goods_state: false, // 商品勾选状态
        }
        console.log(tokenStr);
        if (tokenStr) {
          this.addToCart(goods)
          uni.showToast({
            title: '已添加',
            icon: 'success'
          })
        } else {
          uni.showToast({
            title: '用户未登录！',
            icon: 'error',
            duration: 1500
          })
          setTimeout(() => {
            uni.navigateTo({
              url: '/subpkg/login/login'
            })
          }, 1000)
        }
      },

      async getUserEva() {
        const {
          data: res
        } = await uni.$http.get('/comment')
        if (res.status !== 200) return uni.showToast({
          title: '数据加载失败！'
        })
        this.userEvaList = res.data
      },
      async getLiveHome() {
        const {
          data: res
        } = await uni.$http.get('/liveHome')
        // console.log(res);
        if (res.status !== 200) return uni.showToast({
          title: '数据加载失败！'
        })
        this.liveHome = res.data[0]
      },
      async getGoodsPush() {
        const {
          data: res
        } = await uni.$http.get('/goodsPush')
        if (res.status !== 200) return uni.showToast({
          title: '数据加载失败！'
        })
        this.goodsPush = res.data
      }
    },
    onLoad(options) {
      const data = JSON.parse(options.item)
      this.goodsDetailList = data
      this.getUserEva()
      this.getLiveHome()
      this.getGoodsPush()
    },
    computed: {
      ...mapState('m_cart', ['cart']),
      ...mapGetters('m_cart', ['total']),
    },
    watch: {
      total: {
        // handler 属性用来定义侦听器的 function 处理函数
        handler(newVal) {
          const findResult = this.options.find(x => x.text === '购物车')
          if (findResult) {
            findResult.info = newVal
          }
        },
        // immediate 属性用来声明此侦听器，是否在页面初次加载完毕后立即调用
        immediate: true
      }
    }
  }
</script>

<style lang="scss">
  .goods-detail {
    margin-bottom: 70rpx;
  }

  // 导航
  .nav-bar {
    width: 100%;
    margin-top: 40rpx;

    .nav-title {
      width: 100%;

      .text1 {
        font-size: 34rpx;
        color: #fff;
      }

      .nav {
        display: flex;
        justify-content: space-between;
        height: 128rpx;
        padding: 28rpx 24rpx 0 24rpx;
        box-sizing: border-box;
        background-color: #000;

        image {
          width: 38rpx;
          height: 38rpx;
        }
      }

      .banner-img {
        width: 100%;
        height: 394rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .bgc {
        width: 100%;
        height: 128rpx;
        background-color: #000;
      }

      .nav-msg {
        width: 100%;
        height: 68rpx;
        padding: 24rpx 0 0 24rpx;
        background-color: #f1f1f1;

        text {
          font-size: 22rpx;
          color: #232e3d;
          margin-right: 66rpx;
        }
      }
    }
  }

  // 商品参数
  .goods-par {
    box-sizing: border-box;
    padding: 30rpx 0 30rpx 24rpx;
    border-bottom: 20rpx solid #f1f1f1;

    .msg-one {
      .uname {
        display: flex;
        align-items: center;

        .spe {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 69rpx;
          height: 34rpx;
          margin-right: 8rpx;
          border-radius: 14rpx;
          background-color: #f1f1f1;

          text {
            font-size: 20rpx;
            color: #232e3d;
          }
        }

        text {
          font-size: 36rpx;
          color: #232e3d;
          ;
        }
      }

      .intro {
        margin: 14rpx 0;

        text {
          font-size: 26rpx;
          color: #dadbdd;
        }
      }

      .price {
        margin: 14rpx 0;

        text {
          font-size: 36rpx;
          color: #232e3d;
        }
      }

      .retail {
        margin: 14rpx 0;

        text {
          font-size: 26rpx;
          color: #8a94a8;
        }
      }

      .live {
        display: flex;
        align-items: center;
        width: 172rpx;
        height: 42rpx;
        background-color: #f1f1f1;
        border-radius: 6rpx;
        padding: 11rpx 15rpx;
        box-sizing: border-box;

        text {
          font-size: 26rpx;
          color: #232e3d;
        }
      }
    }

    .goods-two {
      margin: 30rpx 0;
      padding: 30rpx 0;
      display: flex;
      justify-content: start;
      border-top: 1rpx solid #f1f1f1;
      border-bottom: 1rpx solid #f1f1f1;

      // 活动
      .activity {
        text {
          font-size: 26rpx;
          color: #8a94a1;
        }
      }

      .platform {
        display: flex;
        align-items: center;

        .radius-tag {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 133rpx;
          height: 28rpx;
          margin: 0 8rpx 0 28rpx;
          padding: 4rpx 13rpx;
          box-sizing: border-box;
          border-radius: 14rpx;
          border: 1rpx solid #232e3d;

          text {
            color: #232e3d;
            font-size: 22rpx;
          }
        }

        .tag-msg {
          text {
            color: #232e3d;
            font-size: 22rpx;
          }
        }
      }

    }

    .goods-three {
      display: flex;

      .activity {
        margin-right: 28rpx;

        text {
          font-size: 26rpx;
          color: #8a94a1;
        }
      }

      .size {
        text {
          font-size: 28rpx;
          color: #232e3d;
        }
      }
    }
  }

  // 用户评价
  .user-eva {
    padding: 30rpx 0 20rpx 24rpx;
    border-bottom: 20rpx solid #f1f1f1;

    .user-title {
      text {
        color: #232e3d;
        font-size: 36rpx;
      }
    }

    .user-logo {
      margin: 30rpx 0 20rpx 0;
      display: flex;
      align-items: center;

      image {
        width: 80rpx;
        height: 80rpx;
      }

      .text1 {
        margin: 0 20rpx;
        color: #232e3d;
        font-size: 30rpx;
      }

      .space {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100rpx;
        height: 28rpx;
        border-radius: 6rpx;
        background-color: #232e3d;

        text {
          font-size: 20rpx;
          color: #fff;
        }
      }
    }

    .user-container {
      text {
        font-size: 20rpx;
        color: #232e3d;
      }
    }

    .user-img {
      margin: 20rpx 0;

      image {
        width: 164rpx;
        height: 164rpx;
        margin-right: 20rpx;
      }
    }

    .user-size {
      text {
        font-size: 18rpx;
        color: #dadbdd;
      }
    }

  }

  // 生活家
  .live-house {
    padding: 30rpx 24rpx 30rpx 24rpx;
    border-bottom: 20rpx solid #f1f1f1;

    text {
      font-size: 36rpx;
      color: #232e3d;
    }

    image {
      margin-top: 19rpx;
      width: 702rpx;
      height: 394rpx;
    }

    .live-name {
      display: flex;
      justify-content: space-between;
      align-items: center;

      image {
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
      }

      .name {
        display: flex;
        align-items: center;

        .one {
          display: flex;
          flex-direction: column;

          .text1 {
            color: #232e3d;
            font-size: 32rpx;
          }

          .text2 {
            color: #dadbdd;
            font-size: 26rpx;
          }
        }
      }

      .text1 {
        font-size: 26rpx;
        color: #8a94a1;
      }
    }
  }

  // 相似推荐
  .push {
    padding: 30rpx 24rpx 0 24rpx;
    border-bottom: 20rpx solid #f1f1f1;

    .text1 {
      font-size: 36rpx;
      color: #232e3d;
    }

    .goods-list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 30rpx;
      display: flex;
      justify-content: space-between;

      .goods-item {
        width: 340rpx;
        margin-bottom: 30rpx;
        border: 1rpx solid #f1f1f1;

        .img {
          width: 340rpx;
          height: 340rpx;
          padding: 30rpx 10rpx;
          box-sizing: border-box;
          margin-bottom: 20rpx;
          background-color: #f1f1f1;

          image {
            width: 320rpx;
            height: 280rpx;
          }

        }

        .msg {
          padding-left: 30rpx;
          margin-bottom: 20rpx;

          .text1 {
            color: #232e3d;
            font-size: 36rpx;
          }

          .text2 {
            margin: 14rpx 0;
            color: #dadbdd;
            font-size: 26rpx;
          }

          .text3 {
            color: #232e3d;
            font-size: 36rpx;
            margin-bottom: 20rpx;
          }
        }
      }
    }
  }

  // 商品基本信息
  .basic {
    padding-top: 30rpx;

    .text1 {
      margin-bottom: 30rpx;
      padding-left: 24rpx;

      text {
        font-size: 36rpx;
        color: #232e3d;
      }
    }

    .text2 {
      padding-left: 24rpx;
      display: flex;

      .txt {
        width: 250rpx;

        .yuan {
          display: flex;
          align-items: center;
          margin-bottom: 16rpx;

          .circle {
            width: 20rpx;
            height: 20rpx;
            background-color: #9d9d9e;
            border-radius: 50%;
            margin-right: 16rpx;
          }

          .text-one {
            font-size: 28rpx;
            color: #232e3d;
          }
        }

      }

      .txt1 {
        display: flex;
        flex-direction: column;

        .text-two {
          margin-bottom: 16rpx;
          font-size: 28rpx;
          color: #232e3d;
        }
      }
    }

    .more {
      border-top: 1px solid #f1f1f1;
      border-bottom: 20rpx solid #f1f1f1;
      padding: 16rpx 0;
      text-align: center;

      .more-text {
        font-size: 28rpx;
        color: #8a94a1;
      }
    }
  }

  uni-goods-nav {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
  }
</style>
